<template>
	<view class="situation">
		<view class="tab">
			<view class="left" :style="active == 0 ? 'border-bottom: 8rpx solid #006DFF; padding: 20rpx 0 20rpx 0;' : ' padding: 20rpx 0 28rpx 0;'" @click="handleTab(0)">
				未登记（{{not}}）
			</view>
			<view class="right" :style="active == 1 ? 'border-bottom: 8rpx solid #006DFF; padding: 20rpx 0 20rpx 0;' : ' padding: 20rpx 0 28rpx 0;'" @click="handleTab(1)">
				已登记（{{ int }}）
			</view>
		</view>
		<view style="margin: 20rpx 0rpx;">
			<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入姓名/学号关键词查询" @iconClick="iconClick"></uni-easyinput>
		</view>
		<view v-if="active == 0" class="card" v-for="(item, index) in list" :key="index" @click="handleSituationDetail($event, item)">
			<view style="display: flex; justify-content: space-between;">
				<view class="card-left">
					<view class="surname">
						{{item.surname}}
					</view>
					<view class="info">
						<view style="margin-bottom: 10rpx;">
							{{item.name}}
						</view>
						<view style="font-size: 24rpx; margin-top: 10rpx; color: #5D5E5D;">
							学号：{{item.studentID}}
						</view>
					</view>
				</view>
				<view class="card-right">
					<view class="top" style="color: #CB000E;">
						未登记
					</view>
					<view class="bottom" @click.stop="makeCall($event, item.phone)">
						拨打电话
					</view>
				</view>
			</view>
		</view>
		<view class="card" v-if="active == 1" v-for="(item, index) in list" :key="index" @click.stop="handleSituationDetail($event, item)">
			<view class="card_top">
				<view class="left">
					<view class="card_title">
						{{ item.name }}
					</view>
				</view>
				<view class="right" style="color: #5D5E5D;">
					{{ item.studentID }}
				</view>
			</view>
			<view class="card_content">
				<view class="pd">
					计划留校开始时间：{{ item.startTime }}
				</view>
				<view class="pd">
					计划留校结束时间：{{ item.endTime }}
				</view>
				<view class="pd">
					是否需要校内住宿：{{ item.room }}
				</view>
			</view>
			<view class="card_footer">
				<view class="left">
					<view class="icon">
						{{ item.surname }}
					</view>
					<view class="title">
						已登记
					</view>
				</view>
				<view class="right" @click.stop="makeCall($event, item.phone)">
					拨打电话
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				not: 4,
				int: 4,
				active: 0,
				value: '',
				list: [
					{
						name: '张婉悠',
						studentID: '123123',
						phone: '13270453198',
						startTime: '2023/11/16 00:00:00',
						endTime: '2023/11/17 00:00:00',
						room: '需要',
						surname: '张',
					},{
						name: '童锦程',
						studentID: '123123',
						phone: '13270453198',
						startTime: '2023/11/16 00:00:00',
						endTime: '2023/11/17 00:00:00',
						room: '需要',
						surname: '童',
					},{
						name: '张起灵',
						studentID: '123123',
						surname: '张',
						startTime: '2023/11/16 00:00:00',
						endTime: '2023/11/17 00:00:00',
						room: '需要',
						phone: '13270453198',
					},{
						name: '鹿晗',
						studentID: '123123',
						phone: '13270453198',
						startTime: '2023/11/16 00:00:00',
						endTime: '2023/11/17 00:00:00',
						room: '需要',
						surname: '鹿',
					}
				]
			}
		},
		methods: {
			handleTab(index) {
				this.active = index
			},
			iconClick(v) {
				this.value = v
			},
			handleSituationDetail(event, item) {
				// 阻止冒泡行为
				event.stopPropagation();
				uni.navigateTo({
					url: `/pages/situation_detail/index?detail=${item}&inOut=${this.active}&stay=stay`
				})
			},
			makeCall(e, phone) {
				// 阻止冒泡行为
				e.stopPropagation();
				uni.makePhoneCall({
					phoneNumber: phone // 这里替换为你要拨打的电话号码
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.situation{
		width: 94%;
		margin: 20rpx auto 0rpx;
		.tab{
			padding: 0rpx 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 8rpx;
		}
		.card{
			padding: 24rpx 20rpx;
			margin: 20rpx 0;
			border-radius: 10rpx;
			background: #fff;
			.card_top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					padding: 10rpx 0rpx;
					.card_img{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
				}
			}
			.card-left{
				display: flex;
				align-items: center;
				.surname{
					width: 70rpx;
					height: 70rpx;
					background-color: #FFE9BF;
					color: #FFA93F;
					text-align: center;
					line-height: 70rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.info{
					display: flex;
					flex-direction: column;
				}
			}
			.card-right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text-align: center;
				.bottom{
					width: 160rpx;
					height: 50rpx;
					color: #fff;
					line-height: 50rpx;
					border-radius: 10rpx;
					font-size: 24rpx;
					background-image: linear-gradient(to right, #40DD71, #00B773);
				}
			}
			.card_content{
				font-size: 24rpx;
				padding: 20rpx 0rpx;
				color: #5D5E5D;
				border-bottom: 1px solid #ccc;
				.pd{
					padding: 4rpx 0rpx;
				}
			}
			.card_footer{
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				.left{
					display: flex;
					align-items: center;
					color: #686868;
					.icon{
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						margin-right: 16rpx;
						background-color: #FFE9BF;
						border-radius: 50%;
						color: #FFA93F;
					}
					.title{
						color: #00A035;
					}
				}
				.right{
					width: 180rpx;
					height: 60rpx;
					color: #fff;
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
					background-image: linear-gradient(to right, #40DD71, #00B773);
				}
			}
		}
	}
</style>